<template>
  <div>
    <!-- Form -->
    <el-button type="NewlyBuild" @click="handleClick"  v-if="_SHOWBTN(showBetCode1)">编辑</el-button>
    <el-dialog title="编辑部门/岗位" :visible.sync="dialogFormVisible" width="530px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!--上级部门-->
        <el-form-item label="上级部门：">
          <el-select
            disabled
            v-model="mineStatus"
            placeholder="请选择"
            multiple
            collapse-tags
            style="margin-left:-90px"
          >
            <el-option :value="mineStatus" style="height: auto">
              <el-tree
                :data="treedata"
                show-checkbox
                :default-checked-keys="defaultCheckedKeys"
                check-strictly
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                @check-change="handleCheckChange"
              ></el-tree>
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 部门/岗位名称：-->
        <el-form-item label=" 部门/岗位名称：" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入部门/岗位名称" style="margin-left:-90px"></el-input>
        </el-form-item>
        <!-- 部门/岗位简称：-->
        <el-form-item label=" 部门/岗位简称：" prop="name">
          <el-input v-model="ruleForm.name1" placeholder="请输入部门/岗位简称" style="margin-left:-90px"></el-input>
        </el-form-item>
        <!-- 组织类型：-->
        <el-form-item label="组织类型：" prop="region">
          <el-select v-model="ruleForm.region" disabled placeholder="请选择" style="margin-left:-90px">
            <el-option
              v-for="item in options"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--  组织代码：-->
        <el-form-item label=" 组织代码：" prop="name">
          <el-input v-model="ruleForm.name2" placeholder="请输入 组织代码" style="margin-left:-90px"></el-input>
        </el-form-item>
        <!--  联系人：-->
        <el-form-item label=" 联系人：">
          <el-input v-model="ruleForm.name3" placeholder="请输入联系人" style="margin-left:-90px"></el-input>
        </el-form-item>
        <!--  联系电话：-->
        <el-form-item label=" 联系电话：">
          <el-input v-model="ruleForm.name4" placeholder="请输入联系电话" style="margin-left:-90px"></el-input>
        </el-form-item>
        <!--描述-->
        <el-form-item label="描述：">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>

      <!--结束-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Upload from "@/components/Upload/Upload.vue";
export default {
  props: ["id", "click","showBetCode1"],
  components: {
    Upload,
  },
  data() {
    return {
      flag: false,
      // 上级部门
      mineStatus: "",
      treedata: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 父级ID
      id1: "",
      id2: "",
      checkedId: null,
      msg: [],
      //文本框
      textarea: "",
      dialogFormVisible: false,
      ruleForm: {
        name: "",
        name1: "",
        name2: "",
        name3: "",
        name4: "",
        region: "",
      },
      options: [],
      rules: {
        name: [
          { required: true, message: "请输入部门/岗位名称", trigger: "blur" },
        ],
        name1: [
          { required: true, message: "请输入部门/岗位简称", trigger: "blur" },
        ],
        name2: [{ required: true, message: "请输入组织代码", trigger: "blur" }],
        name3: [{ required: true, message: "请输入", trigger: "blur" }],
        name4: [{ required: true, message: "请输入", trigger: "blur" }],
        region: [
          { required: true, message: "请选择组织类型", trigger: "change" },
        ],
      },
      defaultCheckedKeys: [],
    };
  },
  created() {},

  methods: {
    async handleClick() {
      
      // 组织树
      this.Api.treeTissue().then((res) => {
        this.treedata = res.data;
        this.$nextTick(() => {
          // this.setCheckedNames();
        });
      });
      // 组织类型
      this.Api.orangeTissue1({ id: this.id }).then((res) => {
        this.options = res.data;
        console.log(this.options,'111111111111111111');
      });
      this.dialogFormVisible = true;
      // 编辑组织机构
      await this.Api.editTissue({ id: this.id }).then((res) => {
        this.msg = res.data;
        // this.id = this.msg.parentId;
        this.defaultCheckedKeys = [res.data.parentId];
        this.id2 = res.data.parentId;
        this.ruleForm.name = res.data.name;
        this.ruleForm.name2 = res.data.code;
        this.ruleForm.name1 = res.data.shortName;
        this.ruleForm.name3 = res.data.contact;
        this.ruleForm.name4 = res.data.contactPhone;
        this.textarea = res.data.remark;
        this.ruleForm.region = res.data.type + "";
      });
      this.$nextTick(() => {
        this.setCheckedNames();
      });
    },
    // 提交表单
    sure() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.Api.editTissue1({
            id: this.id,
            parentId: this.id2,
            name: this.ruleForm.name,
            code: this.ruleForm.name2,
            shortName: this.ruleForm.name1,
            type: this.ruleForm.region,
            contact: this.ruleForm.name3,
            contactPhone: this.ruleForm.name4,
            remark: this.textarea,
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success("编辑成功");
              this.dialogFormVisible = false;
              this.$emit("close");
              this.click();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          return false;
        }
      });
    },

    // 上级部门
    handleCheckChange(data, checked, node) {
      //true，1. 是否只是叶子节点 2.选择的时候不包含父节点）
      this.setCheckedNames();
      if (checked) {
        this.$refs.tree.setCheckedNodes([data]);
      }
      this.id1 = data.id;
      console.log(this.id1);
      this.setCheckedNames();
      // this.id = data.id;
      // console.log(data);
    },

    setCheckedNames() {
      let res = this.$refs.tree.getCheckedNodes(false, true);
      let arrLabel = [];
      res.forEach((item) => {
        if (arrLabel.length === 0) {
          arrLabel.push(item.name);
        }
      });

      this.mineStatus = arrLabel;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-button--NewlyBuild {
  width: 61px;
  height: 28px;
  background: rgba(61, 127, 255, 1);
  border-radius: 4px;
  padding: 0;
  color: white;
  margin-right: 10px !important;
}
/deep/.el-dialog__wrapper {
  z-index: 9999 !important;
  .el-dialog {
    .el-dialog__header {
      background: rgba(230, 233, 237, 1);
      border-radius: 8px 8px 0px 0px;
      border: 1px solid rgba(230, 233, 237, 1);
      padding: 11px 20px 11px 24px;
      .el-dialog__title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
        padding-right: 368px;
      }
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .el-dialog__body {
      padding: 30px 43px 0 20px;
      .el-form {
        .el-form-item {
          margin: 0 0 16px 0;
          .el-form-item__label {
            width: 120px !important;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            padding: 0;
          }
          .el-form-item__content {
            margin-left: 120px !important;
            .el-input__inner {
              width: 260px;
              height: 36px;
              background: rgba(255, 255, 255, 1);
              border-radius: 4px;
              border: 1px solid rgba(221, 221, 221, 1);
              padding-left: 12px;
            }
          }
        }
        .pic-box {
          display: flex;
          padding-bottom: 10px;
          .h1-1 {
            width: 85px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: right;
          }
          .h1-1::before {
            content: "* ";
            color: #ff0000;
          }
        }
        .flex-box {
          display: flex;
          justify-content: flex-end;

          .pic-Tips {
            width: 360px;
            padding-top: 6px;
            padding-bottom: 15px;
            border-top: 1px solid #dddddd;
            h1 {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 22px;
            }
          }
        }
      }
    }
    .el-dialog__footer {
      padding: 30px 30px 26px;
      .dialog-footer {
        .el-button--default {
          width: 70px;
          height: 36px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          border: 1px solid rgba(215, 219, 224, 1);
          padding: 0;
          color: rgba(51, 51, 51, 1);
        }
        .el-button--primary {
          width: 70px;
          height: 36px;
          background: rgba(61, 127, 255, 1);
          border-radius: 3px;
          padding: 0;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}
/deep/.el-textarea__inner {
  width: 260px;
  height: 100px;
}
/deep/.el-textarea .el-input__count {
  bottom: 3px;
  right: 98px;
}
</style>